<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>资讯表列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--搜索 添加 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-select size="small" v-model="type" placeholder="请选择资讯类型">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="OpenBianji()">添加</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table size="small" :data="DataList" element-loading-text="拼命加载中" style="width: 100%;">
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="type" label="资讯类别" width="120">
                <template slot-scope="scope">
                    <div>{{ typeName(scope.row.type) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="title" label="资讯标题" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="150">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" show-overflow-tooltip width="150px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="OpenBianji(scope.row)">修改</el-button>
                    <el-button size="mini" type="danger" @click="deleData(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑界面 -->
        <el-dialog :title="tit" :visible.sync="editFormVisiible" width="60%" loading>
            <el-form label-width="120px">
                <el-form-item label="资讯标题">
                    <el-input size="small" v-model="xiugai.title" auto-complete="off" placeholder="请输入资讯标题"></el-input>
                </el-form-item>
                <el-form-item label="资讯类别">
                    <el-select v-model="xiugai.type" placeholder="请选择资讯类别" size="small">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="富文本详情" style="height: 400px;">
                    <quill-editor v-model="xiugai.text" :options="editorOption" style="height: 300px;"
                        ref="QuillEditor">
                    </quill-editor>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addData()"
                    v-if="tit == '添加'">添加</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upData()"
                    v-if="tit == '修改'">修改</el-button>
            </div>
        </el-dialog>

        <!-- 富文本图片 -->
        <el-dialog title="选择图片" :visible.sync="uploadVisible" width="190px">
            <div>
                <div class="upload-demo">
                    <el-upload action="" :http-request="mainImgUpload" :show-file-list="false" list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </div>
            </div>
        </el-dialog>


    </div>
</template>

<script>
import {
    selectInfos,
    selectInfoTypes,
    addInfos,
    deleteInfoByIds,
    updateInfos
} from "../../api/userMG";
import client from "@/utils/ossClient.js";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // toggled buttons
    ["blockquote", "code-block"],

    [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: "ordered" }, { list: "bullet" }],
    [{ script: "sub" }, { script: "super" }], // superscript/subscript
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ direction: "rtl" }], // text direction

    [{ size: ["small", false, "large", "huge"] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],
    ["link", "image", "video"], // 对于图片上传这是重点
    ["clean"], // remove formatting button
];
export default {
    data() {
        return {
            DataList: [],
            loading: false,
            tit: '添加',
            editFormVisiible: false,
            type: '',
            xiugai: {
                id: '',
                title: '',
                type: '',
                text: '',
                adminId: '',
                createTime: '',
            },
            uploadVisible: false,
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, // 工具栏
                        handlers: {
                            image: (value) => {
                                if (value) {
                                    // 在这里编写图片按钮点击操作
                                    this.uploadVisible = true;
                                    this.cursorIndex =
                                        this.$refs.QuillEditor.quill.getSelection().index;
                                } else {
                                    this.quill.format("image", false);
                                }
                            },
                        },
                    },
                },
            },
            options: [],
            type: '',
        }
    },
    created() {
        this.getdata()
        this.gteTypeData()
    },
    computed: {
        // 获取类别的名称
        typeName() {
            console.log("this.options", this.options);
            return type => {
                let name = ''
                this.options.forEach(item => {
                    if (item.value == type) {
                        name = item.label
                    }
                })
                console.log("name", name);
                return name
            }
        }
    },
    methods: {
        // 搜索数据
        search() {
            this.getdata(1)
        },
        // 重置数据
        chongzhi() {
            this.type = ''
            this.getdata(1)
        },
        // 获取资讯类别列表
        gteTypeData() {
            selectInfoTypes().then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    res.data.data.forEach((item) => {
                        this.options.push({ label: item.name, value: item.id })
                    })
                    return;
                }
            })
        },
        mainImgUpload(file) {
            var self = this;
            //判断扩展名
            const tmpcnt = file.file.name.lastIndexOf(".");
            const exname = file.file.name.substring(tmpcnt + 1);
            const names = ["jpg", "jpeg", "webp", "png", "bmp"];
            // if (names.indexOf(exname) < 0) {
            //   this.$message.error("不支持的格式!");
            //   return;
            // }
            const fileName = file.file.uid + "." + exname;
            client
                .put(fileName, file.file)
                .then((res) => {
                    if (res.url) {
                        console.log('res.url=======', res.url)
                        self.getUrl(res.url);
                    } else {
                        this.$message.error("文件上传失败");
                    }
                })
                .catch((err) => { });
        },

        getUrl(url) {

            this.uploadVisible = false;
            // 获取富文本组件实例
            let quill = this.$refs.QuillEditor.quill;
            // 如果上传成功
            if (url) {
                // 插入图片，res为服务器返回的图片链接地址

                quill.insertEmbed(this.cursorIndex, "image", url);
                // 调整光标到最后
                quill.setSelection(this.cursorIndex + 1);
            } else {
                // 提示上传失败信息
            }
        },
        // 修改
        upData() {
            this.loading = true
            updateInfos(this.xiugai).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.$message.success(res.msg)
                    this.getdata(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 添加
        addData() {
            this.loading = true
            addInfos(this.xiugai).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.$message.success(res.msg)
                    this.getdata(1)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 打开编辑器
        OpenBianji(row) {
            this.editFormVisiible = true;
            if (row != undefined && row != "undefined") {
                this.tit = "修改";
                this.xiugai.id = row.id;
                this.xiugai.type = row.type;
                this.xiugai.title = row.title;
                this.xiugai.text = row.text;
                this.xiugai.adminId = row.adminId;
                this.xiugai.createTime = row.createTime;
            } else {
                this.tit = "添加";
                this.xiugai.id = '';
                this.xiugai.type = '';
                this.xiugai.text = '';
                this.xiugai.title = '';
                this.xiugai.adminId = '';
                this.xiugai.createTime = '';
            }
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        // 删除
        deleData(row) {
            this.$confirm('确定删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
            }).then(() => {
                let data = {
                    id: row.id
                }
                deleteInfoByIds(data).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.getdata(1)
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 获取数据
        getdata() {
            this.loading = true;
            selectInfos({
                type: this.type
            }).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.DataList = res.data.data;
                    return;
                }
            })
        },
    }
}
</script>

<style></style>